<!DOCTYPE html>
<html>
	<head>
	
		<meta charset="utf-8">
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/date.js"></script>
		<script type="text/javascript">

			$(document).ready(function($){

				var fecha_x1 = Date.parseExact("01/03/2012 12:00:00", "dd/MM/yyyy HH:mm:ss");				
				var fecha_x2 = Date.parseExact("14/03/2012 11:35:27", "dd/MM/yyyy HH:mm:ss");

				var dia = 1000*60*60*24;
				var diferencia = Math.abs(fecha_x2 - fecha_x1);

				console.log("mili: " + diferencia);
				console.log("dias: " + Math.round(diferencia/dia));
				console.log("_---------------------------_");

				var fechita = new Date();
				var cadena = pad(fechita.getDate(),2) + "/" + pad(fechita.getMonth(),2) + "/" + fechita.getFullYear() + " " + pad(fechita.getHours(),2) + ":" + pad(fechita.getMinutes(),2) + ":" + pad(fechita.getSeconds(),2);
				//fechita = Date.parseExact(fechita, "dd/MM/yyyy HH:mm:ss");

				console.log(cadena);
				
				var fechota = new Date(2011,00,01);

				console.log(fechota.toString());

				var fecha1 = $(".date-1").text();
				var fecha2 = Date.parseExact(fecha1, "dd/MM/yyyy");
				
				console.log(fecha2.toString());
				
				var fecha3 = $(".date-2").text();
				var fecha4 = Date.parseExact(fecha3, "dd/MM/yy");
				
				console.log(fecha4.toString());

				$(".boton1").live("click", function(){

					/*GENERANDO OBJETO JSON*/
					var array_diagrama = new Object();

					for(var x=0;x<10;x++){
						
						var array_main = new Object();
						
						array_main = {
							"id"	:	1,
							"name"	:	"DESARROLLO DE SISTEMA DE GESTION DE TRABAJOS TIC",
							"series":	[]
						};
						
						var array_hijos_datos = new Object();
						
						array_hijos_datos[0] = {
							"name" : "xd",
							"start" : "xd",
							"end" : "xd",
							"color" : "xd"
						};

						for(var i=1;i<10;i++){

							array_hijos_datos[i] = {
								"name" 	: ":d",
								"start" : i,
								"end" 	: i,
								"color" : i
							};
						
						}

						array_main.series = array_hijos_datos;
						

						array_diagrama[x] = array_main;
						
					}

					console.log(array_diagrama);
					
				});

				$(".boton2").live("click", function(){

					/*GENERANDO OBJETO JSON*/
					var array_diagrama = new Array();

					for(var x=0;x<10;x++){
						
						var array_main = new Object();
						
						array_main = {
							"id"	:	1,
							"name"	:	"DESARROLLO DE SISTEMA DE GESTION DE TRABAJOS TIC",
							"series":	[]
						};
						
						var array_hijos_datos = new Array();
						
						array_hijos_datos[0] = {
							"name" : "xd",
							"start" : "xd",
							"end" : "xd",
							"color" : "xd"
						};

						for(var i=1;i<10;i++){

							array_hijos_datos[i] = {
								"name" 	: ":d",
								"start" : i,
								"end" 	: i,
								"color" : i
							};
						
						}

						array_main.series = array_hijos_datos;
						

						array_diagrama[x] = array_main;
						
					}

					console.log(array_diagrama);
					
				});

				/*var dato = $("<tbody />");
				obj = [1,2,3,4,5,6,7,8,9,10];

				var datos = new Object();

				$.each(obj, function(i, item){

					datos[i]=	$("<tr />").append(
									$("<td />",{
										"id"	:	i,
										"text"	:	item
									}).add("<td />",{
										"id"	:	i,
										"text"	:	item
									})
								);

					console.log(i);
					
				});

				console.log(datos);

				var cuerpo = null;

				cuerpo =	$("<section />").append(
								$("<div />",{
									"class":"panel-head"
								}).append(
									$("<p />",{
										"text":"{panel_area_nombre_compuesto}"
									})
								).add(
									$("<div />",{
										"class":"panel-body"
									}).append(
										$("<div />").append(
											$("<table />").append(
												$("<thead />").append(
													$("<tr />").append(
														$("<td />",{
															"text"	:	"equipos"
														}).add("<td />",{
															"text"	:	"usuarios"
														})
													)
												).add(datos)
											)
										)
									).add(
										$("<div />",{
											"class":"panel-foot"
										}).append(
											$("<p />").append(
												$("<input />",{
													"id"	:	"chck-posi-panel-{panel_area_nro_unico}",
													"name"	:	"chck-posi-panel-{panel_area_nro_unico}",
													"type"	:	"checkbox"
												}).add("<label />",{
													"for"	:	"chck-posi-panel-{panel_area_nro_unico}",
													"text"	:	" organizar bloques"
												})
											).add(
												$("<p />").append(
													$("<span />",{
														"id"	:	"area-picker-panel-{panel_area_nro_unico}",
														"text"	:	" personalizar color"
													})
												)
											)
										)
									)
								)
							);

				console.log(cuerpo);
*/

				
				
			});

			function pad(number, length) {
				   
		    	var str = '' + number;
			    while (str.length < length) {
			    	str = '0' + str;
			    }
			    		   
			    return str;

			}

		</script>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.contenedor{
			margin: 14px;
		}
		.manipulable{
			width: 200px;
			height: 200px;
			background-color: gray;				
		}
		</style>
	
	</head>
	<body>
		
		<div class="contenedor">
			<span class="date-1">01/02/2012</span>
			<span class="date-2">01/02/12</span>
			<span class="resultado"></span>		
		</div>
		
		<input class="boton1" type="button" value="GENERAR 1" />
		<input class="boton2" type="button" value="GENERAR 2" />
		
	</body>
</html>